/*
 * @Description: 全宗弹窗组件
 * @Author: Rfan
 * @Date: 2022-01-07 14:54:11
 * @LastEditTime: 2022-01-09 17:21:23
 */

import * as React from 'react';
import { Button, Form, Input, Modal } from 'antd';
import FondConstants from '../constants';
import { useFileContext } from '../contexts/FilesContext';

const AddDialog = ({ title, onOk, onCancel }) => {
  const { dialog, dispatch } = useFileContext();
  const [form] = Form.useForm();
  const submitFunc = () => {
    console.log('submit', form);
    form.submit();
  };
  const onFinish = (values) => {
    console.log('form finish', values);
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  const onDialogCancel = () => {
    dispatch({ type: FondConstants.HIDE_DIALOG });
  };
  return (
    <Modal
      title={title}
      visible={dialog.visible}
      onOk={onOk}
      onCancel={onDialogCancel}
      footer={[
        <Button key="back" onClick={onCancel}>
          取消
        </Button>,
        <Button key="submit" type="primary" onClick={submitFunc}>
          确定
        </Button>
      ]}
    >
      <Form
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 14 }}
        form={form}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        <Form.Item name="id" label="id" rules={[{ required: true, message: '请填写全宗号' }]}>
          <Input />
        </Form.Item>
        <Form.Item name="name" label="name" rules={[{ required: true, message: '请填写全宗名称' }]}>
          <Input />
        </Form.Item>
        <Form.Item name="comment" label="备注">
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default AddDialog;
